import React, { useEffect, useRef, useState } from 'react'
import { Menu, Dropdown, Badge } from 'antd';
import { BarsOutlined, ExportOutlined, HomeOutlined, UserOutlined, BellOutlined, BgColorsOutlined } from '@ant-design/icons'
import { setCurrentTopNav } from '../../store/home/homeSlice'
import { useSelector, useDispatch } from 'react-redux'
import { useNavigate } from 'react-router-dom'
import UserInfo from './menuRight/UserInfo'
import CommonMenu from './menuRight/CommonMenu'
import SystemMessage from './menuRight/SystemMessage'
import ChangeSkin from './menuRight/ChangeSkin'


export default function Topnav() {
    const navigate = useNavigate()
    const state = useSelector(state => state)
    const dispatch = useDispatch()
    const currentMenu = useRef()
    const [currentKey, setCurrentKey] = useState('')
    const defaultNav = state.menuNav.defaultTopNav
    const currentTopNav = state.menuNav.currentTopNav
    const userInfo = state.menuNav.userInfo ? state.menuNav.userInfo[0] : {}

    // 顶部导航项
    let items = state.menuNav.topNav ? state.menuNav.topNav.map(item => {
        return {
            key: item.key,
            label: item.label
        }
    }) : []


    // useEffect(() => {
    //     // let temp = items[0] ? items[0].key : ''
    //     // console.log(items);
    //     // dispatch(setCurrentTopNav(temp))
    //     console.log(state.menuNav.currentTopNav);
    //     setCurrentKey(state.menuNav.currentTopNav)
    // }, [state.menuNav.currentTopNav])
    // console.log(state.menuNav.currentTopNav);
    useEffect(() => {
        setCurrentKey(currentTopNav)
        // console.log(currentTopNav);
    }, [currentTopNav])


    function getCurrentKey(e) {
        dispatch(setCurrentTopNav(e.key))
        navigate(e.key)
        // setCurrentKey(e.key)

    }


    return (
        <>
            {/* <div className="logo" /> */}
            <Menu ref={currentMenu}
                onClick={getCurrentKey}
                theme="dark"
                mode="horizontal"
                // defaultSelectedKeys={defaultNav}
                // defaultSelectedKeys={currentKey}
                // selectedKeys={currentKey}
                items={items} />


            {/* 顶部导航右侧操作 */}
            <div className='menuRight'>
                <ul>
                    {/* 账户 */}
                    <Dropdown overlay={<UserInfo />}>
                        <li>
                            <UserOutlined />
                            <span style={{ marginLeft: '10px' }}>{userInfo ? userInfo.admin : '暂无'}</span>
                        </li>
                    </Dropdown>
                    <li className='line'></li>
                    {/* 首页 */}
                    <li title='首页'>
                        {/* <HomeOutlined onClick={() => { navigate('/home'); dispatch(setCurrentTopNav('1')) }} /> */}
                        <HomeOutlined onClick={() => { window.location = "http://localhost:3000/home" }} />
                    </li>
                    <li className='line'></li>
                    {/* 常用菜单 */}
                    <Dropdown overlay={<CommonMenu />}>
                        <li title='常用菜单'>
                            <BarsOutlined />
                        </li>
                    </Dropdown>
                    <li className='line'></li>
                    {/* 系统消息 */}
                    <Dropdown overlay={<SystemMessage />}>
                        <li title='系统消息'>
                            <BellOutlined />
                            <Badge count={50} size='small' offset={['-7px', '-17px']}>
                            </Badge>
                        </li>
                    </Dropdown>
                    <li className='line'></li>
                    {/* 更换皮肤 */}
                    <Dropdown overlay={<ChangeSkin />}>
                        <li title='更换皮肤'>
                            <BgColorsOutlined />
                        </li>
                    </Dropdown>
                    <li className='line'></li>
                    <li title='退出登录' onClick={() => navigate('/login')}>
                        <ExportOutlined />
                    </li>
                </ul>

            </div>
        </>
    )
}
